<template>
    <button :class="ButtonType" @click="test" :disabled="disabled">
        <span>{{text}}</span>
    </button>
</template>

<script>
export default {
  name: "w_button",
  data() {
    return {};
  },
  props: {
    text: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "default"
    },
    size: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    
  },
  computed: {
    ButtonType() {
      let buttontype = {};
      switch (this.type) {
        case "default":
          buttontype["default"] = true;
          break;
        case "info":
          buttontype["info"] = true;
          break;
        case "primary":
          buttontype["primary"] = true;
          break;
        case "warning":
          buttontype["warning"] = true;
          break;
        case "danger":
          buttontype["danger"] = true;
          break;
        case "success":
          buttontype["success"] = true;
          break;
          case "link":
            buttontype['link']=true;
            break;
      }
      switch (this.size) {
        case "small":
          buttontype["small"] = true;
          break;
        case "medium":
          buttontype["medium"] = true;
          break;
        case "mini":
          buttontype["mini"] = true;
          break;
        case "max":
          buttontype["max"] = true;
          break;
      }
      return buttontype;
    }
  },
  methods: {
    test() {
      this.$emit("click");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

button:active {
  color: #dcdfe6;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
button:disabled {
  background-color: #607d8b;
  color: #dcdfe6;
  cursor: default;
}
.medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.small {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}
.mini {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}
.max {
  width: 100%;
  font-size: 16px;
  padding: 14px 20px;
}
.link{
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  border: 0px solid #dcdfe6;
  color: black;
  background-color: white;
}
</style>
